<template>
  <nf-form
    :model="model"
    :partModel="partModel"
    v-bind="extendFormProps"
  >
  </nf-form>
</template>

<script>
  import { defineComponent, reactive } from 'vue'
  import { nfForm } from '../../map'
  import { getItemState } from '../state-item'
  import myWatch from './controller'

  import item_text from '../json/item-text.json'

  const _temp = {
    101: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    100: `<el-input
    type="textarea"
    v-model="text"
    v-bind="itemProps"
  />`,
    102: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    103: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    104: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    105: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    106: `<el-input
    v-model="text"
    v-bind="itemProps"
  />`,
    107: `<el-autocomplete
    v-model="text"
    v-bind="itemProps"
  />`,
    108: `<el-color-picker
    v-model="text"
    v-bind="itemProps"
  />`
  }

  export default defineComponent({
    name: 'nf-meta-help-item-extend-test',
    inheritAttrs: false,
    components: {
      nfForm
    },
    props: {
      temp: Object // 返回模板
    },
    setup(props) {
      // 文本类扩展属性表单，需要的 meta
      const extendFormProps = reactive(item_text)

      // 内部 model
      const state = getItemState()

      const {
        setup,
        model,
        partModel,
      } = myWatch(props)

      setup(model)

      return {
        state,
        model,
        partModel,
        extendFormProps
      }
    }
  })

</script>